<template>
    <div class="warehouse-management-system">
      <!-- 顶部标题栏 -->
      <div class="header">
        <h2>仓库管理系统</h2>
        <div class="header-actions">
          <el-button type="primary" icon="Refresh">刷新</el-button>
          <el-button type="success" icon="Plus">新增</el-button>
        </div>
      </div>
  
      <!-- 主内容区 -->
      <div class="main-content">
        <!-- 仓库信息卡片 -->
        <el-card class="warehouse-info-card">
          <template #header>
            <div class="card-header">
              <span class="warehouse-code">仓库编号：{{ warehouseData.code }}</span>
              <div class="action-buttons">
                <el-tooltip content="编辑" placement="top">
                  <el-button type="primary" circle size="small" icon="Edit" @click="editWarehouse" />
                </el-tooltip>
                <el-tooltip content="删除" placement="top">
                  <el-button type="danger" circle size="small" icon="Delete" @click="deleteWarehouse" />
                </el-tooltip>
              </div>
            </div>
          </template>
  
          <div class="warehouse-details">
            <!-- 第一行信息 -->
            <div class="detail-row">
              <span>仓库名称：</span>
              <span>{{ warehouseData.name }}</span>
            </div>
            <div class="detail-row">
              <span>仓库容量：</span>
              <span>{{ warehouseData.capacity }}m³</span>
            </div>
            <div class="detail-row">
              <span>所属部门：</span>
              <span>{{ warehouseData.department }}</span>
            </div>
  
            <!-- 第二行信息 -->
            <div class="detail-row">
              <span>仓库主管：</span>
              <span>{{ warehouseData.manager }}</span>
            </div>
            <div class="detail-row">
              <span>联系电话：</span>
              <span>{{ warehouseData.phone }}</span>
            </div>
            <div class="detail-row">
              <span>仓库地址：</span>
              <span>{{ warehouseData.address }}</span>
            </div>
  
            <!-- 第三行信息 -->
            <div class="detail-row">
              <span>创建人：</span>
              <span>{{ warehouseData.creator }}</span>
            </div>
            <div class="detail-row">
              <span>创建时间：</span>
              <span>{{ warehouseData.createTime }}</span>
            </div>
            <div class="detail-row">
              <span>更新人：</span>
              <span>{{ warehouseData.updater }}</span>
            </div>
  
            <!-- 状态信息 -->
            <div class="status-block">
              <span class="status-text">状态：{{ warehouseData.status }}</span>
              <span>仓位数量：{{ warehouseData.positionCount }}</span>
            </div>
          </div>
        </el-card>
  
        <!-- 仓位管理区域 -->
        <el-card class="position-management">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="仓位管理" name="positions">
              <!-- 查询表单 -->
              <el-form :inline="true" :model="queryParams" class="search-form">
                <el-form-item label="仓位筛选">
                  <el-input
                    v-model="queryParams.keyword"
                    placeholder="仓位名称/编号"
                    clearable
                    style="width: 180px"
                  />
                </el-form-item>
                <el-form-item label="库位状态">
                  <el-select
                    v-model="queryParams.status"
                    placeholder="全部"
                    clearable
                    style="width: 100px"
                  >
                    <el-option label="启用" value="active" />
                    <el-option label="停用" value="inactive" />
                  </el-select>
                </el-form-item>
                <el-form-item label="库位主管">
                  <el-input
                    v-model="queryParams.manager"
                    placeholder="主管姓名"
                    clearable
                    style="width: 120px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleQuery">查询</el-button>
                  <el-button @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-form>
  
              <!-- 操作按钮组 -->
              <div class="table-actions">
                <el-button type="success" plain @click="exportData">
                  <el-icon><Download /></el-icon>导出
                </el-button>
                <el-button type="warning" plain @click="batchEnable">
                  <el-icon><CircleCheck /></el-icon>批量启用
                </el-button>
                <el-button type="danger" plain @click="batchDisable">
                  <el-icon><CircleClose /></el-icon>批量停用
                </el-button>
              </div>
  
              <!-- 仓位表格 -->
              <el-table
                :data="positionData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column prop="index" label="序号" width="60" align="center" />
                <el-table-column prop="code" label="库位编号" width="120" align="center" />
                <el-table-column prop="name" label="库位名称" width="150" align="center" />
                <el-table-column prop="capacity" label="库位容量(m³)" width="120" align="center" />
                <el-table-column prop="manager" label="库位主管" width="120" align="center" />
                <el-table-column prop="sort" label="排序" width="80" sortable align="center" />
                <el-table-column prop="status" label="状态" width="100" align="center">
                  <template #default="{ row }">
                    <el-tag :type="row.status === 'active' ? 'success' : 'danger'" size="small">
                      {{ row.status === 'active' ? '启用' : '停用' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" align="center" />
              </el-table>
  
              <!-- 分页组件 -->
              <el-pagination
                v-model:current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
              />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue'
  import {
    Download,
    CircleCheck,
    CircleClose,
    Edit,
    Delete,
    Refresh,
    Plus
  } from '@element-plus/icons-vue'
  
  // 仓库数据
  const warehouseData = reactive({
    code: 'CKBH048684',
    name: '仓库一',
    capacity: 500,
    department: '部门一',
    manager: '李明阳',
    phone: '15930411682',
    address: '河南省三门峡市卢氏县文化路956号',
    creator: '赵丽丽',
    createTime: '2023-08-01 19:03:01',
    updater: '张丽',
    updateTime: '2023-08-01 19:03:01',
    status: '启用',
    positionCount: 20
  })
  
  // 仓位表格数据
  const positionData = ref([
    {
      index: 1,
      code: 'KWBH8900',
      name: '库位一',
      capacity: 500,
      manager: '穆叙美',
      sort: 1,
      status: 'active',
      remark: ''
    },
    {
      index: 2,
      code: 'KWBH8901',
      name: '库位二',
      capacity: 500,
      manager: '王五',
      sort: 2,
      status: 'inactive',
      remark: ''
    }
  ])
  
  // 分页相关
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(100)
  
  // 查询参数
  const queryParams = reactive({
    keyword: '',
    status: '',
    manager: ''
  })
  
  // 表格多选
  const multipleSelection = ref([])
  
  // 方法定义
  const handleQuery = () => {
    console.log('查询参数:', queryParams)
  }
  
  const resetQuery = () => {
    Object.keys(queryParams).forEach(key => {
      queryParams[key] = ''
    })
  }
  
  const handleSelectionChange = (val) => {
    multipleSelection.value = val
  }
  
  const batchEnable = () => {
    console.log('批量启用:', multipleSelection.value)
  }
  
  const batchDisable = () => {
    console.log('批量停用:', multipleSelection.value)
  }
  
  const exportData = () => {
    console.log('导出数据')
  }
  
  const editWarehouse = () => {
    console.log('编辑仓库')
  }
  
  const deleteWarehouse = () => {
    console.log('删除仓库')
  }
  
  const handleSizeChange = (val) => {
    pageSize.value = val
  }
  
  const handlePageChange = (val) => {
    currentPage.value = val
  }
  </script>
  
  <style scoped>
  .warehouse-management-system {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
      'Microsoft YaHei', Arial, sans-serif;
    background-color: #f0f2f5;
    min-height: 100vh;
    padding: 20px;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e6e6e6;
  }
  
  .header h2 {
    color: #333;
    font-weight: 500;
    margin: 0;
  }
  
  .main-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .warehouse-info-card {
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .warehouse-code {
    font-weight: bold;
    color: #333;
  }
  
  .action-buttons {
    display: flex;
    gap: 8px;
  }
  
  .warehouse-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
  
  .detail-row {
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  
  .detail-row span:first-child {
    font-weight: bold;
    min-width: 80px;
    color: #606266;
  }
  
  .detail-row span:not(:first-child) {
    margin-left: 10px;
    color: #909399;
  }
  
  .status-block {
    grid-column: span 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 10px;
  }
  
  .status-text {
    color: #67c23a;
    font-weight: bold;
  }
  
  .position-management {
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  
  .search-form {
    margin-bottom: 20px;
  }
  
  .table-actions {
    text-align: right;
    margin-bottom: 15px;
  }
  
  .el-table {
    margin-bottom: 20px;
  }
  
  .el-pagination {
    justify-content: flex-end;
    margin-top: 20px;
  }
  
  .el-button.is-plain {
    border: 1px solid #dcdfe6;
  }
  
  .el-tag {
    font-size: 12px;
  }
  </style>



<!-- 
<template>
    <div class="warehouse-container">
     
      <el-card class="warehouse-card">
        <template #header>
          <div class="card-header">
            <span>仓库编号：{{ warehouse.code || route.query.whouseNum }}</span>
            <el-button-group>
              <el-button type="primary" icon="Edit" @click="editWarehouse" />
              <el-button type="danger" icon="Delete" @click="deleteWarehouse" />
            </el-button-group>
          </div>
        </template>
        
        <div class="info-grid">
          <div class="info-item" v-for="(value, key) in warehouseBaseInfo" :key="key">
            <span class="info-label">{{ key }}：</span>
            <span class="info-value">{{ value }}</span>
          </div>
        </div>
      </el-card>
  
      
      <el-card class="position-management">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="仓位管理" name="positions">
            <div class="toolbar">
              <el-form :inline="true" :model="queryParams" class="search-form">
                <el-form-item label="仓位筛选">
                  <el-input 
                    v-model="queryParams.keyword" 
                    placeholder="仓位名称/编号" 
                    clearable
                    style="width: 180px"
                  />
                </el-form-item>
                <el-form-item label="库位状态">
                  <el-select 
                    v-model="queryParams.status" 
                    placeholder="全部"
                    clearable
                    style="width: 100px"
                  >
                    <el-option label="启用" value="active" />
                    <el-option label="停用" value="inactive" />
                  </el-select>
                </el-form-item>
                <el-form-item label="库位主管">
                  <el-input 
                    v-model="queryParams.managerKeyword" 
                    placeholder="主管姓名" 
                    clearable
                    style="width: 120px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button 
                    type="primary" 
                    @click="handleQuery"
                  >
                    查询
                  </el-button>
                  <el-button @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-form>
              
              <div class="actions">
                <el-button type="success" @click="exportData" plain>
                  <el-icon><Download /></el-icon>
                  导出
                </el-button>
                <el-button type="warning" @click="batchEnable" plain>
                  <el-icon><CircleCheck /></el-icon>
                  批量启用
                </el-button>
                <el-button type="danger" @click="batchDisable" plain>
                  <el-icon><CircleClose /></el-icon>
                  批量停用
                </el-button>
              </div>
            </div>
  
            <el-table 
              :data="positionData" 
              border 
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column prop="index" label="序号" width="60" align="center" />
              <el-table-column prop="code" label="库位编号" width="120" align="center" />
              <el-table-column prop="name" label="库位名称" width="150" align="center" />
              <el-table-column prop="capacity" label="库位容量(m³)" width="120" align="center" />
              <el-table-column prop="manager" label="库位主管" width="120" align="center" />
              <el-table-column prop="sort" label="排序" width="80" sortable align="center" />
              <el-table-column prop="status" label="状态" width="100" align="center">
                <template #default="{row}">
                  <el-tag :type="row.status === 'active' ? 'success' : 'danger'" size="small">
                    {{ row.status === 'active' ? '启用' : '停用' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注" align="center" />
            </el-table>
  
            <div class="pagination-container">
              <el-pagination
                v-model:current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, computed, onMounted } from 'vue'
  import { Download, CircleCheck, CircleClose, Edit, Delete } from '@element-plus/icons-vue'
  import {useRoute,useRouter} from 'vue-router'
  import axios from 'axios'
  
  const router = useRouter()
  const route = useRoute()
  const activeTab = ref('positions')
  
  // 仓库基础信息
  const warehouse = ref({})
  const warehouseBaseInfo = computed(() => ({
    // '仓库名称': warehouse.value[0].whouseName || '仓库一',
    '仓库容量': warehouse.value[0].capacity ? `${warehouse.value.capacity}m³` : '500m³',
    '库管部门': warehouse.value[0].dementperId || '部门一',
    '仓库主管': warehouse.value[0].manager || '李明阳',
    '联系电话': warehouse.value[0].phone || '15930411682',
    '仓库地址': warehouse.value[0].wHouseAddr || '河南省三门峡市卢氏县文化路956号',
    '创建人': warehouse.value[0].creator || '赵丽丽',
    '创建时间': warehouse.value[0].createTime || '2023-08-01 19:03:01',
    '更新人': warehouse.value[0].updater || '张丽',
    '更新时间': warehouse.value[0].updateTime || '2023-08-01 19:03:01',
    '状态': '启用',
    '仓位数量': '20'
  }))
  
  const getWhouseNumlist = () => {
    axios({
      url: 'http://localhost:5170/api/User/GetWhouseNumALL',
      method: 'get',
      params: {
        WhouseNum: route.query.whouseNum
      }
    })
    .then(res => {
      if(res.data.code == 101){
        warehouse.value = res.data.list
        console.log('根据仓库编号查询出的数据', warehouse.value)
      }
    })
  }
  
  // 仓位表格数据
  const positionData = ref([])
  
  // 分页相关
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(100)
  
  // 查询参数
  const queryParams = reactive({
    keyword: '',
    status: '',
    managerKeyword: ''
  })
  
  // 表格多选
  const multipleSelection = ref([])
  
  // 方法定义
  const handleQuery = () => {
    console.log('查询参数:', queryParams)
  }
  
  const resetQuery = () => {
    Object.keys(queryParams).forEach(key => {
      queryParams[key] = ''
    })
  }
  
  const handleSelectionChange = (val) => {
    multipleSelection.value = val
  }
  
  const batchEnable = () => {
    console.log('批量启用:', multipleSelection.value)
  }
  
  const batchDisable = () => {
    console.log('批量停用:', multipleSelection.value)
  }
  
  const exportData = () => {
    console.log('导出数据')
  }
  
  const editWarehouse = () => {
    console.log('编辑仓库')
  }
  
  const deleteWarehouse = () => {
    console.log('删除仓库')
  }
  
  const handleSizeChange = (val) => {
    pageSize.value = val
  }
  
  const handlePageChange = (val) => {
    currentPage.value = val
  }
  
  onMounted(() => {
    getWhouseNumlist()
  })
  </script>
  
  <style scoped>
  .warehouse-container {
    padding: 15px;
    background-color: #f5f7fa;
  }
  
  .warehouse-card {
    margin-bottom: 15px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ebeef5;
  }
  
  .info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 10px 0;
  }
  
  .info-item {
    display: flex;
    align-items: center;
    min-height: 32px;
    font-size: 14px;
  }
  
  .info-label {
    font-weight: bold;
    min-width: 80px;
    color: #606266;
  }
  
  .info-value {
    color: #909399;
  }
  
  .position-management {
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
  
  .toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    flex-wrap: wrap;
  }
  
  .search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  
  .actions {
    display: flex;
    gap: 8px;
  }
  
  .el-form--inline .el-form-item {
    margin-right: 10px;
    margin-bottom: 10px;
  }
  
  .pagination-container {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
  }
  
  .el-table {
    margin-top: 10px;
  }
  
  .el-table :deep(th) {
    background-color: #f8f8f9 !important;
  }
  
  .el-button.is-plain {
    border: 1px solid #dcdfe6;
  }
  </style> -->